<template>
	<div class="demo-image__preview x-preview-image">
		<el-image :style="cssStyle" class="image-box" v-for="(item,index) in imageList" :key="index" :src="item" :z-index="index" :preview-src-list="imageList"></el-image>
	</div>
</template>


<script>
	export default {
		props: {
			images: {},
			cssStyle: {
				default: () => {
					return {
						width: '100px',
						height: '100px'
					}
				}
			}
		},
		data() {
			return {
				imageList: []
			}
		},
		mounted() {
			this.init()
		},
		methods: {
			init() {
				if (typeof (this.images) === 'string') {
					this.imageList.push(this.$ala.urlImage(this.images))
				} else {
					this.imageList = this.imageFor(this.images)
				}
			},
			imageFor(val) {
				var vData = []
				val.forEach((res) => {
					vData.push(this.$ala.urlImage(res))
				})
				return vData
			}
		}
	}
</script>

<style lang="scss">
	.x-preview-image {
		.el-icon-circle-close {
			font-size: 40px;
		}

		.image-box {
			width: 100px;
			height: 100px;
			border-radius: 4px;
			margin-right: 10px;
			margin-bottom: 10px;
			border: 1px dashed #e5e5e5;
		}

		.el-image-viewer__wrapper {
			z-index: 99 !important;
		}

		.el-image-viewer__close {
			top: 80px;

			i {
				font-size: 30px;
				color: #ffffff;
			}
		}
	}
</style>